<template>
  <div class="box">
    <div class="top">手机号验证</div>
    <div class="Return" @click="Return"></div>
    <div class="zhong">
      <p class="zhong_home">你的手机号： +86
        <span>{{tlenum}}</span>
      </p>
      <p class="zhong_text">你会收到一条带有验证码的短信,请输入验证码</p>

      <div class="zhong_inp">
        <input type="text" class="input" v-for="(key,item) in inputarr" ref="inp" maxlength="1" @click="dj">

      </div>
      <div class="count">{{timer}}s</div>
    </div>
    <van-number-keyboard
      v-model="valueNum"
      :show="show"
      extra-key="."
      close-button-text="完成"
      @blur="show=false"
      @input="fous"
      @delete="onDelete"
    />

  </div>
</template>

<script>
     export default {
          name: "sms",
       data(){
            return{
              inputarr:[0,1,2,3],
              value:'',
              valueNum:'',
              i:0,
              j:3,
              picFocusStatus:false,
              show:false,
              valuearr:[],
              timer:60,
              clock : '',
            }
       },
       methods:{
         Return(){
           this.$router.push({ name: 'phone_login' });
         },
         dj(){
           this.show = true;
         },
         fous(values){
           if(this.valuearr.length > 3){
             return
           }
           this.valuearr.push(values);
           console.log(this.valuearr);
           for(let i = 0 ; i < 4; i ++){
             if(this.valuearr[i]=== undefined){
               this.$refs.inp[i].value = '';
             }else {
               this.$refs.inp[i].value = this.valuearr[i];
             }
           }
           if(this.$refs.inp[3].value.length <= 0){
             return
           }

           let yam = this.valuearr.join('');
           this.$http.get(`/api/captcha/verify?phone=${this.$route.query.tel}&captcha=${yam}`)
             .then((res)=>{
               console.log(res);
               this.$http.get(`/api/register/cellphone?phone=${this.$route.query.tel}&password=${this.$route.query.pwd}&captcha=${yam}&nickname=wangchaoasd`)
                 .then((res)=>{
                   console.log(res);
                   this.$toast('注册成功');
                   this.$router.push({ path: '/phone_login' });
                 })
             })
         },
         onDelete(){
           this.valuearr.splice(this.valuearr.length-1,1);
           console.log(this.valuearr);
           for(let i = 0; i < 4; i ++){
             if(this.valuearr[i]=== undefined){
               this.$refs.inp[i].value = '';
             }else {
               this.$refs.inp[i].value=this.valuearr[i];
             }

           }
         },
         djs(){
           this.clock = setInterval(() => {
             this.timer--;
             if(this.timer === 0){
               clearInterval(this.clock);
             }
           },1000)
         }
       },
       computed:{
         tlenum(){
           return this.$route.query.tel.replace(this.$route.query.tel.substring(3,7),"****");
         },
       },
       mounted(){
         this.$refs.inp[0].focus();
         this.djs();
       }

     }
</script>

<style scoped>
  .box{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }
  .top{
    width: 100vw;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    color: #fffdef;
    background: #C64B3D url("../assets/login-register/cancel.png") no-repeat 20px 12px;
    background-size: 14px;
  }
  .zhong{
    width: 100vw;
    height: 200px;
  }
  .zhong_home{
    width: 100vw;
    height: 20px;
    font-size: 14px;
    text-indent: 32px;
    margin-top: 25px;
    color: #AEAEAF;
  }
  .zhong_text{
    width: 100vw;
    height: 20px;
    font-size: 14px;
    text-indent: 32px;
    color: #AEAEAF;
  }
  .zhong_inp{
    width: 100vw;
    height: 100px;
  }
  .input{
    width: 55px;
    height: 50px;
     border: none;
    margin-left: 32px;
    border-bottom: 2px solid #ccc;
  }
  .count{
    width: 40px;
    height: 20px;
    position: absolute;
    font-size: 18px;
    text-align: center;
    top: 200px;
    right: 30px;
  }
  .Return{
    width: 25px;
    height: 30px;
    position: absolute;
    top: 10px;
    left: 18px;
  }
  input{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }

</style>
